<ion-view view-title="Cart" >
  <ion-nav-buttons side="left">
    <i class="icon icon-customerService" style="font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
    </i>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <i class="icon icon-refresh" style="font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
    </i>
  </ion-nav-buttons>
  <ion-content>
    <!--<div id="nogoods">-->
      <!--<img src="img/initCart.png" style="width: 92%">-->
      <!--<div style="width: 92%;margin-left: 4%;color: #666666">Your shopping cart is empty.Try adding something-->
        <!--by <span style="color: #65c178">searching</span>  or <span style="color: #65c178">browsing</span> categorise.You may add items from your <span style="color: #65c178">previous orders</span> too.-->
      <!--</div>-->
    <!--</div>-->


    <div style="padding: 5px 3% 5px 3%;width:100%;background: #f7f7f7;color: #4d4d4d">
      <span >*Next Delivery:Tomorrow,8am-9am(<span style="color: #65c178">FREE</span>)</span>
      <span>*Add <span style="color: #65c178">$50</span> items to your order to qualify for <span style="color: #65c178">FREE</span> delivery.</span>
    </div>


    <ion-list style="width: 100%">
      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>

      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>

      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>

      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>


      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>

      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>


      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>


      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>


      <ion-item class="cartli">
        <img src="img/ben.png" style="width: 20%;vertical-align: middle;display: inline-block">

        <div style="display: inline-block;width: 54%;color: #4d4d4d;vertical-align: middle">
          <span>Seeds Of Change Quinoa & Whole Grain Brown Rice With Garlic,
          8.5 Oz EACH</span><br>
          <img src="img/note.png" style="width: 8%;display: inline-block;vertical-align: top;margin-top: 4px;">
          <span style="color: #65c178;display: inline-block;vertical-align: text-top">Note/Replcement Options</span>
        </div>

        <div style="width: 23%;display: inline-block;vertical-align: middle">
          <div style="float: right;color: #65c178;font-weight: 900">$0.88</div>
          <div style="height:28px;line-height:28px;width: 100%;text-align: center;border:1px solid #dfdfdf;margin-top: 27px;float: right">
            <div style="width: 26px;height: 26px;line-height:19px;font-size:43px;background: #f7f7f7;color: #cccccc;text-align: center;float: left">-</div>
            1
            <div style="width: 26px;height: 26px;line-height:22px;font-size:22px;font-weight: 600;background: #f7f7f7;color: #65c178;text-align: center;float: right">+</div>

          </div>
        </div>

        <ion-option-button style="width: 20px;background: #eb6100">
          <i class="icon icon-delete" style="font-weight: 600;font-size: 28px;margin-top: 5px;margin-left: 13%;color: #fff">
          </i>
        </ion-option-button>
      </ion-item>
    </ion-list>

    <div style="width: 100%;height: {{tabsHeight}}"></div>

    <style type="text/css">
      .cartli{width: 100%;border-bottom: #e5e5e5 1px solid;padding: 10px 3% 10px 3%;color: #666666;}
      .bar.bar-stable .title{color: #fff}
      .item-complex .item-content, .item-radio .item-content{padding: 0;color: #666666;white-space:normal}
      .item{font-size: 14px;border-style:none;border-bottom: #e5e5e5 1px solid;}
    </style>
  </ion-content>
  <!-- cart checkout-->
     <div style="background: #f7f7f7;width: 100%;height: 40px;line-height:40px;position: fixed;bottom: {{tabsHeight}}">
        <div ng-click="goCheckout()" style="width: 20%;height: 40px;text-align: center;background: #65c178;color: #fff;float: right">
          Checkout
        </div>

        <div style="height:40px;float: right;margin-right: 20px;color: #65c178;font-weight: 900;font-size: 15px;">
          $2.64
        </div>

        <div style="height: 40px;float: right;margin-right: 20px;color: #4d4d4d;font-size: 13px;">
          SUBTOTAL
        </div>
     </div>


<!-- cart tips-->
      <!--<shadediv></shadediv>-->


      <!--<div style="width: 80%;margin-left: 10%;height: 271px;top:165px;background: #fff;position: fixed;border-radius: 4px">-->
        <!--<div style="width: 100%;height: 40px;line-height: 40px;color: #4d4d4d;text-align: center;border-bottom: 1px solid #e7e7e7">-->
          <!--Terms Of Replacement-->
        <!--</div>-->
        <!--<div style="width: 90%;margin-left:5%;margin-top: 15px;font-weight: normal;color: #666666">-->
          <!--By continuing the checkout, you must read and accept our terms of replcements.-->
          <!--We reserve the right to not authorize refunds in cases of item replacement.-->
         <!--</div>-->
        <!--<div class="shadebuttonother" style="background: #ffa200">Wait, let me customize.</div>-->
        <!--<div class="shadebuttonother" style="background: #65c178">I'm ready to place my order.</div>-->
      <!--</div>-->


<!--add note-->
      <!--<div style="width: 80%;margin-left: 10%;height: 315px;top:165px;background: #fff;position: fixed;border-radius: 4px">-->
      <!--<div style="width: 100%;height: 40px;line-height: 40px;color: #4d4d4d;text-align: center;border-bottom: 1px solid #e7e7e7">-->
      <!--Note/Replacement Options-->
      <!--</div>-->
      <!--<div style="width: 100%;font-weight: normal;color: #65c178;text-align: center;border-bottom: 1px solid #e7e7e7;padding-bottom: 10px;">-->
         <!--<div style="margin-top:10px;background: #65c178;width: 94%;height: 40px;line-height: 40px;margin-left: 3%;border-radius: 3px;color: #ffffff">Find Best Match</div>-->

         <!--<div style="background: #fff;width: 94%;height: 40px;line-height: 40px;margin-left: 3%;border-radius: 3px;">Call To Confirm</div>-->

         <!--<div style="background: #fff;width: 94%;height: 40px;line-height: 40px;margin-left: 3%;border-radius: 3px;">Don't Replace</div>-->
      <!--</div>-->
      <!--<div style="width: 44px;line-height: 44px;width: 100%;border-bottom: 1px solid #e7e7e7">-->
        <!--<input style="width: 80%;margin-left: 10px;height: 40px;margin-top: 2px;border:0px" placeholder="Designated Substitute">-->
      <!--</div>-->
      <!--<div style="width: 44px;line-height: 44px;width: 100%;border-bottom: 1px solid #e7e7e7">-->
         <!--<input style="width: 80%;margin-left: 10px;height: 40px;margin-top: 2px;border:0px" placeholder="Add Note Here">-->
      <!--</div>-->

        <!--<div style="width: 49%;height: 40px;float: left;text-align: center;line-height: 40px;color: #4d4d4d">-->
          <!--Cancel-->
        <!--</div>-->

        <!--<div style="width: 49%;height: 40px;float: right;text-align: center;line-height: 40px;color: #65c178">-->
          <!--Save-->
        <!--</div>-->

      <!--</div>-->

<!--tips note -->

</ion-view>
